import React, { Component, Fragment } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';

import { Form } from '@ant-design/compatible';
import PageHeader from '@/components/PageHeader';
import { FormComponentProps } from '@ant-design/compatible/es/form';

import { Card, Descriptions, Table } from 'antd';

import '@ant-design/compatible/assets/index.css';

import { DetailInfoData, DetailInfoItem } from './data';

const { Item } = Descriptions;
const typeText = ['', '柜体', '货架', '地堆'];

interface DetailProps extends FormComponentProps {
  dispatch: Dispatch<any>;
  detailInfo: DetailInfoItem;
  dataInfo: DetailInfoData;
  location: { query: any };
}

interface DetailState {
  pageIndex: number;
  pageSize: number;
  rowId:number;
}

function mapStateToProps(state: any) {
  const {
    partitionManagementDetail: { detailInfo, dataInfo },
  } = state;

  return {
    detailInfo,
    dataInfo,
  };
}

@connect(mapStateToProps)
class DetailElem extends Component<DetailProps, DetailState> {
  columns = [
    { title: 'ID', dataIndex: 'id' },
    { title: '名称', dataIndex: 'name' },
    {
      title: '类型',
      dataIndex: 'type',
      render: (val: number) => typeText[val],
    },
  ];

  state: DetailState = {
    pageIndex: 1,
    pageSize: 20,
    rowId: 0,
  };

  componentDidMount() {
    const { location: { query } } = this.props;
    this.fetchDetailInfo(query.id);
  }

  componentDidUpdate(prevProps: any) {
    const {
      location: { query: { id } },
    } = this.props;
    if (prevProps.location.query.id !== id) {
      this.fetchDetailInfo(id);
    }
  }

  fetchDetailInfo = (id: number) => {
    const { pageIndex, pageSize } = this.state;
    const { dispatch } = this.props;
    dispatch({
      type: 'partitionManagementDetail/fetch',
      payload: { id },
    });

    this.fetchAction('fetchLogisRegion', { regionId: id, pageIndex, pageSize });
  };

  onSelectChange = (pageIndex: number, pageSize: number) => {
    const {
      location: { query: { id: regionId } },
    } = this.props;
    this.setState({ pageIndex, pageSize }, () => {
      this.fetchAction('fetchLogisRegion', { regionId, pageIndex, pageSize });
    });
  };

  onClickRow = ({ id }: any) => ({
    onClick: () => {
      this.setState({ rowId: id });
    },
  })

  setRowClassName = ({ id }: any) => {
    const { rowId } = this.state;
    return id === rowId ? 'clickRowStyl' : '';
  }

  fetchAction = (typeName: string, payload: any = {}) => {
    const { dispatch } = this.props;
    dispatch({
      type: `partitionManagementDetail/${typeName}`,
      payload,
    });
  };

  render() {
    const { pageIndex, pageSize } = this.state;
    const { detailInfo, dataInfo } = this.props;
    const dataSource = dataInfo.list;

    const pagination: object = dataInfo
      ? {
        total: dataInfo.count,
        current: pageIndex,
        pageSize,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100'],
        onChange: this.onSelectChange,
        onShowSizeChange: this.onSelectChange,
      }
      : {};

    return (
      <Fragment>
        <PageHeader />

        <Card bordered={false} className="marginB20">
          <Descriptions>
            <Item label="分区">{detailInfo.name}</Item>
            {detailInfo.type === 1 ? (
              <Item label="物流中心">{detailInfo.logisName}</Item>
            ) : (
              <Item label="小区">{detailInfo.gardenName}</Item>
            )}
            {detailInfo.type === 1 && (
              <Item label="语音播报">
                {detailInfo.fileUrl && `${detailInfo.fileUrl.substring(0, 32)}...`}
              </Item>
            )}
          </Descriptions>
        </Card>

        <Card bordered={false}>
          <Table
            rowKey="id"
            className="statementTable"
            columns={this.columns}
            dataSource={dataSource}
            pagination={pagination}
            onRow={this.onClickRow}
            rowClassName={this.setRowClassName}
          />
        </Card>
      </Fragment>
    );
  }
}

export default Form.create<DetailProps>()(DetailElem);
